<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型组成部分</title>
    <style>
        #d1 {
            /*内容区的宽高大小*/
            height: 400px;
            width: 400px;
            font-size: 20px;

            /*内边距,左右各20px，上下各20px*/
            padding: 20px;
            /*边框,也是上下左右填充*/
            border: 10px dashed black;
            /*背景颜色会填充内边距，边框 (改成虚线,或者透明色可以看见)*/
            background-color: gray;


            /*外边距,只影响盒子位置，不影响盒子大小*/
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="d1">你好啊</div>
<div>
<img src="../../images/盒子模型.png" width="500px">
</div>

</body>
</html>